<div class="page-layout simple right-sidebar inner-sidebar inner-scroll">

    <!-- HEADER -->
    <div class="header accent p-24" fxLayout="row" fxLayoutAlign="start center">

        <button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
                (click)="toggleSidebar('simple-right-sidebar-4')">
            <mat-icon>menu</mat-icon>
        </button>

        <div>
            <h2>Right inner sidebar with inner scroll</h2>
        </div>

    </div>
    <!-- / HEADER -->

    <!-- CONTENT -->
    <div class="content">

        <!-- SIDEBAR -->
        <base-sidebar class="sidebar" name="simple-right-sidebar-4" position="left" lockedOpen="gt-md">

            <!-- SIDEBAR CONTENT -->
            <div class="content p-24" basePerfectScrollbar>
                <base-demo-sidebar></base-demo-sidebar>
            </div>
            <!-- / SIDEBAR CONTENT -->

        </base-sidebar>
        <!-- / SIDEBAR -->

        <!-- CENTER -->
        <div class="center p-24" basePerfectScrollbar>

            <!-- CONTENT -->
            <div class="content p-24">
                <base-demo-content></base-demo-content>
            </div>
            <!-- / CONTENT -->

        </div>
        <!-- / CENTER -->

    </div>
    <!-- / CONTENT -->

</div>
